<template>
    <div id="categoriesComponent">
        <!--        一级分类-->
        <el-scrollbar height="500px">
            <a-list :data-source="allCategories" bordered size="small" style="text-align: left">
                <template #renderItem="{item: firstCategories }">
                    <a-list-item>
                        <a-list-item-meta>
                            <template #title>
                                <a @click="clickFirstLevelCategory(firstCategories)">{{ firstCategories.name }}</a>
                            </template>
                        </a-list-item-meta>
                    </a-list-item>
                </template>
            </a-list>
        </el-scrollbar>
        <!-- 二级分类-->
        <a-drawer :open="drawerStatus" size="large" title="分类详情" @close="drawerStatus = false">
            <!--三级分类-->
            <el-scrollbar>
                <a-list :data-source="secondCategories" bordered size="small">
                    <template #renderItem="{item: secondCategories}">
                        <a-list-item>
                            <a-list-item-meta>
                                <template #title>
                                    {{ secondCategories.name }}
                                    <DownCircleTwoTone />
                                </template>
                                <template #description>
                                    <a v-for="(thirdCategories,index) in secondCategories.children as Array<CategoryTreeVo>">
                                        <el-link :key="thirdCategories.catId" type="primary"
                                                 @click="searchProduct(thirdCategories)">
                                            {{ thirdCategories.name }}
                                        </el-link>
                                        <a-divider v-show="index<(secondCategories.children.length-1)"
                                                   style="width: 2px;background-color: aquamarine"
                                                   type="vertical" />
                                    </a>
                                </template>
                            </a-list-item-meta>
                        </a-list-item>
                    </template>
                </a-list>
            </el-scrollbar>
        </a-drawer>
    </div>
</template>

<script lang="ts" setup>
import { DownCircleTwoTone } from "@ant-design/icons-vue";
import { CategoryTreeVo } from "@/model/CategoriesModel.ts";
import { onMounted, ref } from "vue";
import { getAllCategory } from "@/api/product/CategoryApi.ts";
import { SearchRouterParams } from "@/model/SearchModel.ts";
import router from "@/router/router.ts";
//所有分类数据
const allCategories = ref<Array<CategoryTreeVo>>([]);
//抽屉状态
const drawerStatus = ref(false);
//二级分类
const secondCategories = ref<Array<CategoryTreeVo>>([]);
/**
 * 获取所有分类
 */
const initGetAllCategory = () => {
    getAllCategory().then(res => {
        allCategories.value = res.data;
    });
};

/**
 * 点击一级分类
 * @param firstCategories
 */
const clickFirstLevelCategory = (firstCategories: CategoryTreeVo) => {
    //1 开启抽屉
    drawerStatus.value = true;
    //2 获取二级分类和三级分类
    secondCategories.value = firstCategories.children;
};
/**
 * 搜索商品
 * @param thirdCategories
 */
const searchProduct = (thirdCategories: CategoryTreeVo) => {
    //跳转搜索页面,并且传递路径参数
    router.push({
        name: "Search",
        query: {
            thirdCatId: thirdCategories.catId as SearchRouterParams["thirdCatId"],
        } as SearchRouterParams,
    });
};
/**
 * 初始化
 */
onMounted(() => {
    //初始化所有分类
    initGetAllCategory();
});
</script>

<style lang="scss" scoped>
#categoriesComponent {

}
</style>